<template>
	<view class="nav-wrapper" :class="['nav-wrapper',{BgColor:activeIndex === 0 || BgIndex === 1}]">
		<view class="nav-left">
			<!-- 默认左侧图标 -->
			<slot name="left"></slot>
		</view>

		<view class="nav-center">
			<view v-for="(tab, index) in tabs" :key="index" class="nav-item" :class="{ active: activeIndex === index }"
				@click="handleTabClick(index)">
				<text>{{ tab }}</text>
				<view class="underline" :class="{ active: activeIndex === index }"></view>
			</view>
		</view>

		<view class="nav-right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		tabs: {
			type: Array,
			default: {}
		},
		defaultIndex: {
			type: Number,
			default: 1
		},
		BgColor: {
			type: Number,
			default: 0
		}
	})

	const emit = defineEmits(['change'])

	const activeIndex = ref(props.defaultIndex)
	const BgIndex = ref(props.BgColor)

	const handleTabClick = (index) => {
		if (activeIndex.value !== index) {
			activeIndex.value = index
			emit('change', index)
		}
	}

	function onperson(url) {
		console.log(url);
		uni.navigateTo({
			url: url
		})
	}
</script>

<style scoped>
	.nav-wrapper {
		position: fixed;
		z-index: 1000;
		/* 	top: 30rpx; */
		width: 100%;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: end;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.BgColor {
		background: #000000;
	/* 	background-color: #fff; */
	}

	.nav-left,
	.nav-right {
		width: 140rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}

	.left {
		display: flex;
	}

	.nav-center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-item {
		position: relative;
		margin: 0 10rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #464646;
		transition: color 0.3s ease;
	}

	.nav-item.active {
		color: #ff0000;
		font-size: 30rpx;
		font-weight: bold;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 4rpx;
		background-color: #ff0000;
		transition: width 0.3s ease;
	}

	.underline.active {
		width: 80%;
	}
</style>